<template>
    <el-table class="table" :data="tableData" border @selection-change="handleSelectionChange">
        <el-table-column
            v-if="isselection"
            type="selection"
            class="cell"
            width="80"
        ></el-table-column>
        <template v-for="(item, index) in tableList" :key="index">
            <el-table-column
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :fixed="item.fixed"
                :sortable="item.sortable"
            >
            <!-- 插槽开关 -->
            <template v-if="item.switch" #default="scope">
                <el-switch
                        v-model="scope.row[item.prop]"
                        class="ml-2"
                        size="large"
                        :active-value="1"
                        :inactive-value="0"
                        @change="handleCheckboxChange"
                        style="--el-switch-on-color: #333; --el-switch-off-color: #999"
                    />
            </template>
            <!-- 缩略图 -->
            <template v-if="item.img" #default="scope">
                <img class="page-table-img"  :src="scope.row[item.prop]" @click="enlargeImage(scope.row)" alt="">
            </template>
        
        </el-table-column>
        </template>

        <el-table-column v-if="isSite" fixed="right" label="功能" width="120">
            <template #default="scope">
                <el-button type="primary" :icon="Edit" @click="handleEditClick(scope.row)" circle />
                <el-button type="danger" :icon="Delete" @click="handleDelClick(scope.row)" circle />
            </template>
        </el-table-column>
    </el-table>
    <!-- 图片放大 -->
    <EnlargeImage :visible="flag" :list="image" :title="title" @closeImage="close">
    </EnlargeImage>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-facing-decorator';
import { ElTable, ElTableColumn, ElButton, ElPagination } from 'element-plus';
import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue';
import EnlargeImage from '@/components/enlarge-image/index.vue';

@Component({
    components:{
        EnlargeImage
    }
})
export default class PageTable extends Vue {
    // 是否显示selection
    @Prop({ default: false }) public isselection!: boolean;
    // 是否显示设置
    @Prop({ default: false }) public isSite!: boolean;
    // 是否分页
    @Prop({ default: true }) public isPagination!: boolean;
    // 表格数据
    @Prop({ default: [] }) public tableData!: any[];
    @Prop({ default: [] }) public tableList!: any[];

    public flag!:boolean
    public image!:any[]
    public title!:string

    @Emit('handleEditClickEmit')
    public handleEditClick(info: any) {
        return info;
    }

    @Emit('handleDleClickEmit')
    public handleDelClick(info: any) {
        return info;
    }

    @Emit('handleSelectionChangeEmit')
    public handleSelectionChange(list: []) {
        return list;
    }

    public handleCheckboxChange(){

    }

    // 放大图片
    public enlargeImage(item:any){
        this.image=item.image_list
       this.flag=true
       this.title=item.title
       console.log(this.flag);
       
    }
    // 关闭放大图片
    public close(){
        this.flag=false
    }

    public Edit = Edit;
    public Delete = Delete;
}
</script>

<style scoped lang="less">
.page-table-img {
    cursor: pointer;
}
</style>
